<script setup>
import { onMounted, ref } from 'vue'
import PocketBase from 'pocketbase'

const title = ref('')
const dataList = ref([])
const tabIndex = ref(0)

function getUrl(id) {
  return `/en/solution/${id}`
}
// 更新当前的 title 和 tabIndex，用于在用户切换标签时更新界面显示的内容
function changeTitle(index) {
  title.value = dataList.value[index].summarize
  tabIndex.value = index
}
onMounted(async () => {
  const pb = new PocketBase('https://autoreport.site:8888')
  const data = await pb
    .collection('servers_mobile_en')
    .getFullList({ expand: 'content' })
  dataList.value = data.map((item) => {
    return {
      tabs: item.tabs,
      summarize: item.summarize,
      content: item.expand.content.map((con) => {
        const url = 'https://autoreport.site:8888/api/files/9yk3kdlo3l1zhp4'
        return {
          id: con.id,
          title: con.title,
          content: con.content,
          img: `${url}/${con.id}/${con.img}`,
        }
      }),
    }
  })
  // window.location.href 返回当前页面的完整 URL，检查 URL 中是否包含问号
  if(window.location.href.includes('?') === true){
    // 将 URL 按照 ? 分割，获取 ? 后的部分。再将数字符串按 = 分割，获取等号后面的部分。例如，https://example.com?page=2 返回 2。
    // +：将字符串 2 转换为数字 2。
    tabIndex.value = +window.location.href.split('?')[1].split("=")[1]
  }
  title.value = dataList.value[tabIndex.value].summarize
})

</script>

<template>
  <div class="w-full">
    <div class="mt-10 mb-8 px-[6%] md:mt-20 md:mb-14">
      <div class="text-2xl text-[#333] font-[700] text-center md:text-4xl ">Solution</div>
      <div class="text-base text-[#777] font-[300] leading-[25px] mt-3 md:mt-4 md:text-2xl md:leading-10">{{ title }}</div>
    </div>
    <a-tabs @change="changeTitle" :active-key="tabIndex" :default-active-key="tabIndex">
      <a-tab-pane
        v-for="(item, index) in dataList"
        :key="index"
        :title="item.tabs"
      >
        <div class="px-[6%] mt-6 md:mt-8 flex flex-wrap md:px-[10%] md:mb-10">
          <div
            v-for="(itemList, indexList) in item.content"
            :key="indexList"
            class="mb-10 w-[370px] pb-[20px] bg-[#f6f7f8] hover:shadow md:w-[800px]"
          >
            <a :href="getUrl(itemList.id)" target="_blank">
              <div class="w-full h-[170px] md:h-[220px]">
                <img
                  :src="itemList.img"
                  alt="图片"
                  class="w-full h-full bg-position-center bg-cover bg-no-repeat"
                >
              </div>
              <div
                class="text-[16px] font-[600] text-[#333] leading-6 mt-5 mx-8 mb-3 md:text-[22px] md:mt-8 md:mb-6"
              >
                {{ itemList.title }}
              </div>
              <div class="text-[14px] mx-8 leading-[25px] md:text-[20px] md:leading-10">
                {{ itemList.content }}
              </div>
            </a>
          </div>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<style scoped>

:deep(.arco-tabs-nav-tab-list) {
  @apply overflow-x-auto flex;
  -webkit-mask: linear-gradient(90deg, #000 80%, transparent);
}

:deep(.arco-tabs-tab) {
  @apply text-[15px] font-[600] pb-[12px] md:pb-[20px] md:text-2xl md:px-2;
}

:deep(.arco-tabs-nav::before) {
  @apply hidden;
}

:deep(.arco-tabs-tab-active) {
  @apply text-[#1890ff];
}

:deep(.arco-tabs-nav-ink) {
  @apply bg-[#1890ff];
}

</style>
